<script setup lang="ts">
</script>
<template>
  <div class="content">
    <div class="Marquee">
      <div class="titel">
        <h4>热门品牌 <span>国际经典 品质保证</span></h4>
      </div>
      <div class="neir">
        <ul>
          <li>
            <a href="javascript:;">
              <img src="../../../images/pyy.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="../../../images/pyy.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="../../../images/pyy.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="../../../images/pyy.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="../../../images/pyy.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="../../../images/pyy.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="../../../images/pyy.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="../../../images/pyy.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="../../../images/pyy.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="../../../images/pyy.jpg" alt="" />
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.Marquee {
  width: 1240px;
  height: 420px;
  overflow: hidden;
  .titel {
    color: #333;
    padding: 22px 0;
    h4 {
      font-size: 32px;
      margin-left: 6px;
      font-weight: 500;
      span {
        font-size: 16px;
        color: #999;
        margin-left: 22px;
      }
    }
  }
  .scroll {
    height: 30px;
    width: 300px;
    background: rgb(138, 192, 186);
  }
  // 里面的每一条
  .item {
    height: 30px;
    width: 100%;
  }
  .neir {
    width: 100%;
    height: 305px;
    ul {
      white-space: nowrap;
      li {
        display: inline;
        overflow: hidden;
        margin-right: 10px;
        a {
          img {
            width: 240px;
            height: 305px;
          }
        }
      }
    }
  }
}
.content {
  width: 1240px;
  height: 100%;
  margin: 0 auto;
}
</style>
